<!DOCTYPE html>
<html>

<head lang="en">
	<title>找攻略</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
	<script src="/js/plugins/jquery/jquery.min.js"></script>
	<script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="/css/reset.css"/>
	<link rel="stylesheet" href="/css/strategyComment.css"/>
	<script src="/js/plugins/jrender/jrender.min.js"></script>
	<script src="/js/plugins/form/jquery.form.js"></script>
	<link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
	<script src="js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
	<link rel="stylesheet" href="/js/plugins/dialog2/css/dialog.css">
	<script src="/js/plugins/dialog2/js/dialog.min.js"></script>
	<script src="js/common.js"></script>
</head>

<script>
    $(function () {

        var params = getParams();
        var userId = "";
        if (params) {
            $.get('/strategyComments/'+params.id+'/a',function (data) {
                userId = data.user.id;
                $("#lookBtn").attr('href',"userProfiles.html?id="+userId);
                $.get('/notices', {noticeId: noticeId, noticedId: data.user.id}, function (data) {
                    if (!data.result) {
                        $("#followBtn").text('关注');
                    } else {
                        $("#followBtn").text('取消关注');
                    }
                })
                $('.container').renderValues(data, {
                    getHref:function (item,value) {
                        var tempstar="";
                        var tempo="";
                        var value = parseInt(value)
                        for(var i=0;i<value;i++){
                            tempstar+='<i class="fa fa-star"></i>';
                        }
                        for(var i=0;i<5-value;i++){
                            tempo+='<i class="fa fa-star-o"></i>';
                        }
                        $(item).html(tempstar+tempo);
                    },
                    getImgs:function (item, value) {
                        var imgs=value.split(';');
                        console.log(imgs);
                        var temp='';
                        for(var i=0;i<imgs.length-1;i++){
                            temp+='<li><img src='+imgs[i]+'></li>';
                        }

                        $(item).html(temp);
                    },
                    getId:function (item,value) {
                        var href =  $(item).data('href');
                        $(item).attr('href', href + value);
                    }
                });
            })
        }
        //如果没有id就直接结束方法
        if (!params.id) {
            return;
        }
        var user = JSON.parse(sessionStorage.getItem("user"));
        var noticeId = user.id;
        var id;
        //发送请求获取数据
        $.get("/strategyComments/" + params.id, function (data) {
            //渲染到页面
            $(".comment").renderValues(data, {

                //val是对应属性的值,item
                'getStar': function (item, value) {

                    //获取data中的图片进行处理
                    var imgUrls = data.imgUrls;
                    var imgArr = (imgUrls.split(";"));
                    var html = "";
                    //拼接html
                    $.each(imgArr, function (index, ele) {
                        html += '<li><img src="' + ele + '"></li>';
                    });

                    var starhtml = '';
                    var unStarhtml = '';
                    var value = parseInt(value);
                    for ( i = 0; i < value; i++) {
                        starhtml += '<i class="fa fa-star"></i>';
                    }
                    for ( i = 0; i < 5 - value; i++) {
                        unStarhtml += '<i class="fa fa-star-o"></i>';
                    }
                    $(item).html(starhtml + unStarhtml);
                }

            });

        });


        //点赞
        var user = JSON.parse(sessionStorage.getItem("user"));
        var status;
        //$("#likeBtn").addClass("fa fa-thumbs-o-up");
        $.get('likes/query', {type: 2, typeId: params.id, userId: user.id}, function (data) {
            console.log(data);
            if (data.result != null) {
                $("#likeBtn").addClass("fa fa-thumbs-up");
                status = 1;
            } else {
                $("#likeBtn").addClass("fa fa-thumbs-o-up");
                status = 0;
            }
        })

        $("#likeBtn").click(function () {
            if (status == 0) {
                $("#likeBtn").removeClass("fa fa-thumbs-o-up");
                $("#likeBtn").addClass("fa fa-thumbs-up");
                $.ajax({
                    async: false,
                    type: "POST",
                    url: "likes/addLikes",
                    data: {type: 2, typeId: params.id, userId: user.id, status: 1},
                    success: function (data) {
                        status = 1;
                    }
                });
                queryTotalLike();
            } else {
                $("#likeBtn").removeClass("fa fa-thumbs-up");
                $("#likeBtn").addClass("fa fa-thumbs-o-up");
                $.ajax({
                    async: false,
                    type: "POST",
                    url: "likes/deleteLikes",
                    data: {type: 2, typeId: params.id, userId: user.id},
                    success: function (data) {
                        status = 0;
                    }
                });
                queryTotalLike();
            }
            ;

        })
        function queryTotalLike() {
            //显示点评点赞的数量
            $.get('/likes/strategyComments/' + params.id, function (data) {
                console.log(data);
                var html = '';
                $("#likeNum").html(html + data.result);
            })
        }

        queryTotalLike();

        //收藏
        //页面刷新的时候
        var collectStatus;
        if (user == null) {
            $("#collectBtn").addClass("fa fa-star-o");
            collectStatus = 0;
        } else {
            $.get('collects/queryUserCollects', {'user.id': user.id, 'strategy.id': params.id}, function (data) {
                console.log(data);
                //判断返回的值是否为空
                if (data.result != null) {
                    $("#collectBtn").addClass("fa fa-star");
                    collectStatus = 1;
                } else {
                    $("#collectBtn").addClass("fa fa-star-o");
                    collectStatus = 0
                }
            })
        }
        //收藏和取消收藏
        $("#collectBtn").click(function () {
            if (user == null) {
                $(document).dialog({
                    titleShow: '温馨提示',
                    content: '请登陆后再收藏',
                    autoClose: 1500
                });
            } else {
                if (collectStatus == 0) {
                    $("#collectBtn").removeClass("fa fa-star-o");
                    $("#collectBtn").addClass("fa fa-star");
                    $.ajax({
                        type: "POST",
                        url: "collects/addUserCollects",
                        data: {'user.id': user.id, 'strategy.id': params.id},
                        success: function (data) {
                            collectStatus = 1;
                        }
                    });
                } else {
                    $("#collectBtn").removeClass("fa fa-star");
                    $("#collectBtn").addClass("fa fa-star-o");
                    $.ajax({
                        type: "POST",
                        url: "collects/deleteUserCollects",
                        data: {'user.id': user.id, 'strategy.id': params.id},
                        success: function (data) {
                            collectStatus = 0;
                        }
                    });
                }
            }
        })

        //关注
        $("#followBtn").click(function () {

            //登录后才能关注
            if (!sessionStorage.getItem("user")) {
                $(document).dialog({
                    titleShow: '温馨提示',
                    content: '请登录后再操作'
                });
                return;
            }

            if (user.id == userId){
                $(document).dialog({
                    titleShow: '温馨提示',
                    content: '您不能关注您自己'
                });
                return;
            }

            $.get('/notices', {noticeId: noticeId, noticedId: userId}, function (data) {
                if (!data.result) {
                    $("#followBtn").text('关注');
                    //没查到则添加
                    $.post('/notices', {noticeId: noticeId, noticedId: userId}, function (data) {
                        if (data.success) {
                            $("#followBtn").text('取消关注');
                            //关注加粉丝加一
                            var noticedNum = parseInt($("#noticedNum").text()) + 1;

                            $("#noticedNum").text(noticedNum)
                        } else {
                            $(document).dialog({
                                titleShow: '温馨提示',
                                content: '操作失败',
                                autoClose: 15000
                            });
                        }
                    });
                } else {
                    $("#followBtn").text('取消关注');
                    //使用Ajax来发送各种请求方法的请求；
                    $.ajax({
                        type: 'post',
                        url: "/notices",
                        data: {'_method': 'DELETE', 'noticeId': noticeId, 'noticedId': userId},
                        async: false,
                        success: function (data) {
                            if (data.success) {
                                $("#followBtn").text('关注');
                                //取消关注粉丝减一
                                var noticedNum = parseInt($("#noticedNum").text()) - 1;
                                $("#noticedNum").text(noticedNum)
                            } else {
                                $(document).dialog({
                                    titleShow: '温馨提示',
                                    content: '操作失败',
                                    autoClose: 1500
                                });
                            }
                        }
                    })
                }

            });
        })
    })

</script>
<body>
<div class="search-head">
	<div class="row nav-search">
		<div class="col">
			<a href="javascript:history.go(-1);">
				<span><i class="fa fa-chevron-left"></i></span>
			</a>
		</div>
		<div class="col">
			<span>点评详情 </span>
		</div>
		<div class="col"></div>
	</div>
</div>

			<div class="comment">


			<div class="container">
				<div class="row">
						<div class="col-2 comment-head">
							<a id="lookBtn">
								<img class="rounded-circle" render-src="user.headImgUrl">
							</a>
							<button class="btn" id="followBtn"><i class="fa fa-hand-o-right"> </i> 关注</button>
						</div>
						<div class="col">
							<span class="comment-star" render-key="starNum" render-fun="getHref">

							</span>

							<span class="comment-date" render-html="createTime"></span>
							<div class="comment-content">
								<p render-html="content"></p>
							</div>
							<ul class="comment-img" render-key="imgUrls" render-fun="getImgs">

							</ul>

							<div class="comment-link">
								<a data-href="strategyCatalogs.html?strategyId=" render-key="strategy.id" render-fun="getId">
									<img  render-src="strategy.coverUrl"> <span render-html="strategy.title"></span>
									<i class="fa fa-angle-right fa-2x"></i>
								</a>
							</div>
						</div>
				</div>
			</div>

	<div class="count d-flex justify-content-between">
		<div class="p-2">评论<span render-html="commentNum"></span></div>
		<div class="p-2" id="likeBtn">&nbsp;&nbsp; 赞<span id="likeNum"></span></div>
	</div>

</div>

<div class="comment-list">
	快来发表你的评论吧
</div>

<div class="operation">
	<div class="d-flex justify-content-between">
		<div class="p-2"><i class="fa fa-commenting-o"></i> 添加你的评论</div>
		<div class="p-2"><i class="" id="collectBtn"></i> 收藏</div>
	</div>
</div>


</body>

</html>